﻿<template>
  <div class="personal">
    <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
      <el-form-item label="账号" prop="zhanghao">
        <el-input size="small" v-model="editForm.zhanghao" auto-complete="off" placeholder="请输入账号"
                  style='width:25%'></el-input>
      </el-form-item>

      <el-form-item label="名字" prop="mingzi">
        <el-input size="small" v-model="editForm.mingzi" auto-complete="off" placeholder="请输入名字"
                  style='width:25%'></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="dianhua">
        <el-input size="small" v-model="editForm.dianhua" auto-complete="off" placeholder="请输入电话"
                  style='width:25%'></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="youxiang">
        <el-input size="small" v-model="editForm.youxiang" auto-complete="off" placeholder="请输入邮箱"
                  style='width:25%'></el-input>
      </el-form-item>
      <el-form-item label='照片' prop='zhaopian'>
        <el-upload class='avatar-uploader' action='http://localhost:9999/files/upload' :headers='headers'
                   :show-file-list='false' :on-success='handleZhaopianSuccess' :before-upload='beforeZhaopianUpload'>
          <img v-if='editForm.zhaopian' :src='editForm.zhaopian' class='avatar'><i v-else
                                                                                   class='el-icon-plus avatar-uploader-icon'></i>
        </el-upload>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">更新
      </el-button>
    </div>
  </div>
</template>

<script>
import {suguanxinxiEdit, suguanxinxiSave, suguanxinxiDetail} from "@/api/suguanxinxi/suguanxinxiApi";
import {Session} from "@/utils/storage";

export default {
  name: 'personal',
  data() {
    return {
      rules: {
        zhanghao: [{required: true, message: '请输入账号', trigger: 'blur'},
        ],
        mima: [{required: true, message: '请输入密码', trigger: 'blur'},
        ],
        dianhua: [{pattern: /^[1][3,4,5,7,8][0-9]{9}$/, required: true, message: '请输入正确的手机号', trigger: 'blur'}
        ],

      },
      editForm: {
        avater: ''
      },
    };
  },
  created() {
    this.getDetail()
  },
  computed: {
    headers() {
      return {"token": Session.get("token")}
    },
  },
  methods: {
    getDetail() {
      if (!Session.get('userInfo')) return false;
      this.userInfo = Session.get('userInfo');
      console.log(this.userInfo);
      suguanxinxiDetail(this.userInfo.id).then(res => {
        if (res.code == '0') {
          this.editForm = res.data;
        }
      }).catch(err => {
        if (err) {
          this.$message.error(err)
        } else {
          this.$message.error('操作失败，请稍后再试！')
        }
      })
    },

    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          if (this.editForm.id) {
            suguanxinxiEdit(this.editForm).then(res => {
              if (res.code == '0') {
                this.getDetail()
                this.$message({
                  type: 'success',
                  message: '个人信息修改成功！'
                })
                this.$store.dispatch('userInfos/setUserInfos', this.editForm);
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            }).catch(err => {
              if (err) {
                this.$message.error(err)
              } else {
                this.$message.error('操作失败，请稍后再试！')
              }
            })
          } else {
            suguanxinxiSave(this.editForm).then(res => {
              if (res.code == '0') {
                this.getDetail()
                this.$message({
                  type: 'success',
                  message: '个人信息添加成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            }).catch(err => {
              if (err) {
                this.$message.error(err)
              } else {
                this.$message.error('操作失败，请稍后再试！')
              }
            })
          }
        } else {
          return false
        }
      })
    },
    handleZhaopianSuccess(res, file) {
      if (res.code == "0") {
        this.editForm.zhaopian = "/files/download/" + res.data.id
        this.$forceUpdate()
      }
    },
    beforeZhaopianUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

  }
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
